<template>
  <el-select v-model="value" @change="$emit('update:modelValue', $event)" :placeholder="placeholder"
             :filterable="filterable">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";
import {IDomEditor} from "@wangeditor/editor";
import baseService from "@/service/baseService";

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: ""
  },
  mode: {
    type: String,
    default: "default" // 可选值：[default | simple]
  },
  placeholder: {
    type: String,
    default: ""
  },
  style: {
    type: String,
    default: "height: 300px;"
  },
  disabled: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  }
});

const options = ref([]);
const value = ref(computed(() => `${props.modelValue}`));

const getStationList = () => {
  return baseService.put("/KxStation/kxstation/getStationList").then((res) => {
    options.value = res.data;
  });
};


getStationList();

// 编辑器change事件触发
const emit = defineEmits(["update:modelValue"]);
// const handleChange = (editor: IDomEditor) => {
//   // emit("update:modelValue", editor.getHtml());
//   emit("update:modelValue", value.value);
// };
</script>
